<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:cc="http://java.sun.com/jsf/composite/customcomponents"
	contentType="text/html">
	
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title><h:outputText value="#{label['airportsStatus.title']} - #{label['appNameTitle']}"/></title>
	</h:head>	
	<h:body>	
		<p:growl widgetVar="growl" showDetail="true" sticky="false" life="4000"/>

		<cc:LatamHeader userInfo="true">
			<cc:AppHeaderMenu/>
		</cc:LatamHeader>
					
		<h:form>
			<p:panel styleClass="latam_body_panel"> 
				<p:fieldset legend="#{label['airportsStatus.panelTitle']}">					
					<cc:AirportsMap id="airportsMap" widgetVar="map" airports="#{airportsStatus.airports}"/>		
				</p:fieldset>			
				<p:spacer height="10"/>
				<p:fieldset legend="#{label['airportsStatus.manualSetterTitle']}" 
					style="width: 975px; margin: 0px auto;">		
						<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
							<p:outputLabel value="#{label['airportsStatus.label.airport']} :"/>
							<p:selectOneMenu id="airport" value="#{airportsStatus.iataCode}">
								<f:selectItems value="#{airportsStatus.iataCodes}" />
							</p:selectOneMenu>
							<p:outputLabel value="#{label['airportsStatus.label.status']} :"/>
							<p:selectOneMenu id="status" value="#{airportsStatus.status}">
								<f:selectItem itemLabel="OK" itemValue="OK" />
			            		<f:selectItem itemLabel="PROBLEM" itemValue="PROBLEM" />
			            		<f:selectItem itemLabel="UNKNOWN" itemValue="UNKNOWN" />
							</p:selectOneMenu>
							<f:facet name="footer">
	        					<p:commandButton value="#{label['airportsStatus.action.setStatus']}" actionListener="#{airportsStatus.changeStatus}"/>
						    </f:facet>
						</h:panelGrid>
				</p:fieldset>
				<p:fieldset legend="#{label['airportStatus.externalSenderTitle']}">
					<p:commandButton value="#{label['airportStatus.downloadLink']}" ajax="false" icon="ui-icon-arrowthichk-s">  
    					<p:fileDownload value="#{airportsStatus.downloadFile}" />  
					</p:commandButton>  
				</p:fieldset>
			</p:panel>
		</h:form>
				
		<cc:LatamFooter/>
		
		<p:socket onMessage="handleMessage" channel="/airportsStatusEvents" autoConnect="true" />    		
		<script type="text/javascript">  		    
			function handleMessage(airportsData) {
				var airports = eval( '(' + airportsData + ')' );
				map.updateAirports( airports );
			}
		</script>			
	</h:body>
</f:view>